// 在 React 中可以使用 if...else 和 条件运算符 来进行条件渲染

// 1.0 使用 if...else
function Greeting(props) {
  function UserGreeting() {
    return (
      <h1>This is UserGreeting!</h1>
    )
  }
  function CuestGreeting() {
    return (
      <h1>This is GuestGreeting!</h1>
    )
  }
  const isLogin = props.isLogin;  // 获取props值
  if (isLogin) {  // 通过props中的值来判定该渲染哪个组件
    return (
      <UserGreeting />
    )
  } else {
    return <CuestGreeting />
  }
}
ReactDOM.render(
  <Greeting isLogin={false} />,  // 传入props值
  document.getElementById('root')
)

// 2.0 使用state进行条件渲染
class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: true,
    };
    this.handleClickGuest = this.handleClickGuest.bind(this);
    this.handleClickUser = this.handleClickUser.bind(this);
  }
  handleClickUser() {
    this.setState({
      isLogin: false,
    });
  }
  handleClickGuest() {
    this.setState({
      isLogin: true,
    });
  }
  render() {
    let btn;
    if (this.state.isLogin) {
      btn = <button onClick={this.handleClickUser}>User</button>;
    } else {
      btn = <button onClick={this.handleClickGuest}>Guest</button>;
    }
    return btn;
  }
}
ReactDOM.render(<Greeting />, document.getElementById("root"));

// 3.0 通过与运算符实现条件渲染（ && ）
class Mailbox extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
        <h1>Hello!</h1>
        {this.props.unreadMessages.length > 0 &&
          <h2>
            You have {this.props.unreadMessages.length} unread mssage.
          </h2>
        }
      </div>
    )
  }
}
const messages = ['React', 'ReactRead'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
)

// 4.0 三目运算符
function getUser() {
  const sanmu = false;
  return (
    <h1>
      This is san mu {sanmu == false ? 'shi' : 'bushi'}
    </h1>
  )
}

// 5.0 组件返回null、防止组件污染
function getUser() {
  const warning = false;
  if (warning) {
    return null;
  } else {
    return (
      <h1>不是 null！</h1>
    )
  }
}